<template>
  <div class="bid-info">     
      <div class="info-div">
          <div class="info-title">
              <span>评分表</span>
          </div>
          <div class="tree-title">
              <span>审查内容</span>
              <span>评分</span>
              <span>审查记录描述</span>
          </div>
           <el-tree
            :data="scoreItemJson"
            node-key="id"
            :default-expanded-keys="expandedTree"
            class="table-trees">
            <span class="custom-tree-node" slot-scope="{ node, data }" :class="{'last-span':!data.children}">
                <span>{{ data.label }}({{data.rate}}%)</span>
                <span v-if="!data.children&&data.type==='select'">
                    <el-select :disabled="!isEdit" v-model="data.point" placeholder="请选择" size="mini" style="width:40%" @change="()=>{tfullMarks=0;fullMarks=0;allRate=0;totalScore=0;getPoint(scoreItemJson)}">
                        <el-option v-for="item in data.options" :key="item" :label="item!==-1?item+'分':'不适用'" :value="item"></el-option>
                    </el-select>
                </span>
                <span v-if="!data.children&&data.type==='input'">
                    <el-input-number :disabled="!isEdit" v-model="data.point" :min="0" :max="data.fullMarks" size="small"></el-input-number>
                </span>
                <span v-if="!data.children">
                    <el-input :disabled="!isEdit" v-model="data.remarks" type="text" size="mini"></el-input>
                </span>
            </span>
        </el-tree>
        <div class="info-text mt20">
            <span class="text-label">
                满分：
            </span>
            <span class="text-value">{{fullMarks}}</span>  
        </div>
        <div class="info-text mt20">
            <span class="text-label">
                实际满分：
            </span>
            <span class="text-value">{{tfullMarks}}</span>  
        </div>
        <div class="info-text mt20">
            <span class="text-label">
                总分：
            </span>
            <span class="text-value">{{totalScore}}(根据汇总自动计算)</span>  
        </div>
        <div class="info-text mt20">
            <span class="text-label">
                百分比：
            </span>
            <span class="text-value">{{allRate}}%(根据汇总自动计算)</span>  
        </div>
        <div class="info-text w100">
            <span class="text-label">
                评分附件：
            </span>
            <span class="text-value">
                <el-upload class="upload-file" ref="upload" :action="this.lib.config.host.system + '/common/fileupload/upload'" :data=fileData
                :limit="1" :on-success="res=>{uploadSuccess(res,from===1?'techFileId':'businessFileId')}">
                <el-button slot="trigger" type="primary">选取文件</el-button>
                </el-upload>  
            </span>  
        </div>
        <div class="info-text w100">
            <span class="text-label">
                评估意见：
            </span>
            <span class="text-value">
                <el-input v-model="ruleForm.content" type="textarea"></el-input>
            </span>  
        </div>
        <div class="info-text w100 tr">
            <!-- <el-button size="mini" type="primary" @click="submitForm(0)" v-if="isEdit">暂存</el-button> -->
            <el-button size="mini" type="primary" @click="submitForm(1)" v-if="isEdit">提交</el-button>
            <el-button size="mini" @click="$router.push({'name':'EvaluationStep',query:{'step':from,'id':$route.query.id}})">返回</el-button> 
        </div>
      </div>
  </div>
</template>
<script>
import qs from 'qs';
  export default {
    data() {
      let _this=this;  
      return {
          isEdit:true,
          from:1,
          remarks:'',
          ruleForm:{
              id:_this.$route.query.id,
              content:'',
          },
          // 定义附件的业务模块和业务动作
          fileData: {
            busAction: "BID_SET_EVA_METHOD",
            tableName: "CT_PS_BID_MAIN_EXT",
            tableId: this.$route.query.id
          },
          scoreItemJson:[
            {
                id: 1,
                label: '技术偏离',//父级说明title
                rate:20,//父级占百分比
                expanded:true,//是否展开父节点
                children: [{
                    id: 101,
                    rate:20,//子级占百分比
                    label: '依据技术偏离选择0—20分',//子级说明title
                    type:'select',//评分类型
                    point:1,//当前打分值
                    fullMarks:20,//子级总分
                    options:[-1,1,3,5,10,15,20],//下拉选项分值,type为select必需
                    remarks:'描述'//审查记录描述
                },{
                    id: 102,
                    rate:20,//子级占百分比
                    label: '依据技术偏离选择0—20分',//子级说明title
                    type:'input',//评分类型
                    point:1,//当前打分值
                    fullMarks:20,//子级总分
                    remarks:'描述'//审查记录描述
                }]
            },
            {
                id: 2,
                label: '技术资料',
                rate:20,
                children: [{
                    id: 201,
                    rate:10,
                    fullMarks:10,
                    label: '依据技术资料完整性选择0—10分',
                    type:'select',
                    point:1,
                    options:[1,3,5,10],
                    remarks:'描述'
                }, {
                    id: 202,
                    rate:10,
                    fullMarks:10,
                    label: '依据技术资料先进性选择0—10分',
                    type:'select',
                    point:1,
                    options:[1,3,5,10],
                    remarks:'描述'
                }]
            },
            {
                id: 3,
                label: '项目设计方案',
                rate:20,
                children: [{
                    expanded:true,
                    id: 301,
                    rate:10,
                    fullMarks:10,
                    label: '依据方案先进性选择0—10分',
                    type:'select',
                    point:1,
                    options:[1,3,5,10],
                    remarks:'描述'
                  }, {
                    id: 302,
                    rate:5,
                    fullMarks:5,
                    label: '依据方案实用性选择0—5分',
                    type:'select',
                    point:1,
                    options:[1,2,3,4,5],
                    remarks:'描述'
                  }, {
                    id: 303,
                    rate:5,
                    fullMarks:5,
                    label: '依据方案合理性选择0—5分',
                    type:'select',
                    point:1,
                    options:[1,2,3,4,5],
                    remarks:'描述'
                  }
                ]
            },
            {
                id: 4,
                label: '交货期',
                rate:40,
                children: [{
                    id: 401,
                    rate:20,
                    fullMarks:20,
                    label: '根据满足进度要求选择0—20分',
                    type:'select',
                    point:1,
                    options:[1,3,5,10,15,20],
                    remarks:'描述'
                  }, {
                    id: 402,
                    rate:10,
                    fullMarks:10,
                    label: '依据质保年限选择0—10分',
                    type:'select',
                    point:1,
                    options:[1,3,5,10],
                    remarks:'描述'
                  }, {
                    id: 403,
                    rate:10,
                    fullMarks:10,
                    label: '依据售后承诺选择0—10分',
                    type:'select',
                    point:1,
                    options:[1,3,5,10],
                    remarks:'描述'
                  }
                ]
            }
          ],
          expandedTree:[],
          totalScore:0,
          allRate:0,
          fullMarks:0,
          tfullMarks:0
      };
    },
    created(){
        this.isEdit=this.$route.query.isedit==0;
        this.from=this.$route.query.step;
        this.getPoint(this.scoreItemJson)//计算总分百分比等
        this.getexpanded(this.scoreItemJson)//获取展开节点
    },
    methods: {
        //获取展开节点方法
        getexpanded(data){
           data.forEach(item=>{
                if(item.expanded&&item.children){
                    this.expandedTree.push(item.id);
                }
                if(item.children){
                    this.getexpanded(item.children)
                }else{
                    if(item.expanded){
                        this.expandedTree.push(item.id);
                    }
                }
           })
        },
        //计算总分百分比等方法
        getPoint(data){
            for (var value of data) {
                if (value.children) {
                    this.getPoint(value.children)
                }else{
                    if(value.point===-1){
                        this.fullMarks+=value.fullMarks;
                    }else{
                        this.totalScore+=value.point;
                        this.tfullMarks+=value.fullMarks;
                        this.fullMarks+=value.fullMarks;
                        this.allRate+=value.point;
                    }
                }
            }
        },
        uploadSuccess: function (response,type) {
            //附件上传成功回调
            this.ruleForm[type] = response.id;
        },
        submitForm(type){
            let data={
                busType : this.from,
                totalScore:this.totalScore,
                scoreItemJson:qs.stringify(this.scoreItemJson),
                //allRate:0,
                //fullMarks:0,
                //tfullMarks:0,
                ...this.ruleForm
            }
            this.axios.post(`${this.lib.config.host.bidtender}/bidmgt/evaluation/saveScore/${this.$route.query.id}/${this.$route.query.psVendorId}/${type}`,data).then((res) => {
                if(res.data.success){
                    this.$message.success(type===1?'提交成功！':'暂存成功！');
                    this.isEdit=true;
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
  }

</script>

<style scoped>
.mt20{
    margin-top: 20px;
}
h3{
    color:#DA1F24;
    overflow: hidden;
}
h3 button{
    float: right;
    margin-left: 20px;
}
.bid-info{
    border:1px solid #dadada;
    margin: 20px;
}
.bid-info .info-div{
    padding: 20px;
    border-bottom: 1px solid #dadada;
    overflow: hidden;
}
.bid-info .info-div:last-child{
    border:0;
}
.bid-info .info-text{
    float: left;
    width: 25%;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.bid-info .info-text.w100{
    width: 100%;
}
.bid-info .info-text.w50{
    width: 50%;
}
.bid-info .info-text span{
    float: left;
}
.bid-info .info-text .text-label{
    width: 110px;
    line-height: 20px;
}
.bid-info .info-text.w100 .text-label{
    position: absolute;
}
.bid-info .info-text .text-value{
    width: 100%;    
    margin-left: -110px;
    padding-left: 110px;
}
.bid-info .info-text.w100 .text-value{
    margin-left: 0;
}
.bid-info .info-title{
    font-size: 16px;
    margin-bottom: 20px;
}
.info-title span{
    display: inline-block;
    border-bottom:2px solid #DA1F24;
    height:40px;
    min-width: 110px;
    line-height:30px;
}
.info-div .tree-title{
    width: 100%;
    overflow: hidden;
    border: 1px solid #dadada;
    padding: 10px 0;
}
.info-div .tree-title span{
    padding-left:36px;font-size:16px;height:30px;line-height:30px;display:block;width:30%;float:left;margin-right:1%;
}
</style>
<style>
.w100.tr{
    text-align: right;
}
.bid-info .el-tree-node__content{
    height:50px;
    border:1px solid #dadada;
    border-top:0;
    line-height: 50px;
}
.bid-info .table-trees{
    width:100%;
}
.custom-tree-node.last-span{
    width:100%;
    
}
.custom-tree-node.last-span   span{
    float: left;
    width:30%;
    margin-right:1%;
}
</style>